Main moons of Saturn

Stereo Stereo Baseline (deg) Crosseye Parallel

.

May 05 2018 05:33:20 UTC     JD 2458243.731481
Sat May 05 2018 07:26:40 GMT+0200 (ora legale Europa occidentale)
Earth:9.443 AU13.654 km/s
Sun: 10.066 AU18.388 km/s

Set time Date and Time (UTC)

Edit objects -- state vectors Object Reference object Name Color Shadow Label Trail Sub Z Mass Diameter Location (x,y,z) Velocity (x,y,z)

Edit objects -- orbital elements Object Reference object Name Color Shadow Label Trail Sub Z Mass Diameter a, e, i Ω, ω, MA

Look at

Look from

Names

Stars

Rotating frame

Axes

3d

Orbits

Trails

Time step 4

Camera A Azimuth Altitude Distance Axes 3d Orbits Trails Names

Distance and speed Local time

Local time Sat May 05 2018 07:33:20 GMT+0200 (ora legale Europa occidentale)

Coordinated Universal Time Sat May 05 2018 05:33:20 (UTC)

Julian Day 2458243.7314814813

Save as Simulation name: Keywords (optional) Description (optional) Author (optional) Share on orbitsimulator.com Create temporary link Your simulation is here: Source code:

<!DOCTYPE html>
<html id ='htmlAll'>
<head>
   <title>Main moons of Saturn</title>
   <meta name = 'keywords'    content = "">
   <meta name = 'description' content = "Simulation of the orbits of Saturn's main moons: Mimas, Enceladus, Tethys, Dione, Rhea, Titan, Hyperion and Iapetus.">
   <meta name = 'author' content = 'Tony Dunn, Giuseppe Gatani'>
   <meta http-equiv="content-type" content="text/html; charset = UTF-8">

nav ul li:hover > ul {
		display: block;
	}

nav ul {z-index: 10; 
    font-family: Tahoma, Geneva, sans-serif; font-size: 20px;
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 0px;
	border-radius: 0px;  
	list-style: none;
	position: fixed; top: -20px; left: 0px;
	//display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #fff;
		}

nav ul li:hover label {
			color: #fff;
		}

nav ul ul li:active label {
			color: #aaa;
		}

nav ul li a {
		display: block; padding: 0px 10px;
		color: #757575; text-decoration: none;
	}

nav ul li label {
		display: block; padding: 0px 0px;
		color: #757575; text-decoration: none;
	}

nav ul li label {
		display: block; padding: 0px 10px;
		color: #757575; text-decoration: none;
	}

nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}
		nav ul ul li label {
			padding: 0px 10px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #4b545f;
			}
			nav ul ul li label:hover {
				background: #4b545f;
			}

nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

.slider {
  width: 200px; opacity: 0.8;
  //margin: 100px auto;
}

input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
//  width: 100%;
  width: 200px;
  height: 20px;
  margin: 0;
  border: none;
  padding: 1px 2px;
  border-radius: 14px;
  background: #232528;
  box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  -webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  outline: none; /* no focus outline */
}

input[type="range"]::-moz-range-track {
  border: inherit;
  background: transparent;
}

input[type="range"]::-ms-track {
  border: inherit;
  color: transparent; /* don't drawn vertical reference line */
  background: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

/* thumb */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */
  background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
input[type="range"]::-moz-range-thumb {
  width: 40px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}

input[type="range"]::-ms-thumb {
  width: 40px;
  height: 18px;
  border-radius: 12px;
  border: 0;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
   #divAds {position: absolute; top: 0px; left: 0px; width: 730px; height: 90px; z-index: 4; visibility: hidden}
   #divLogo {position: absolute; top: 91px; left: 0px; visibility: hidden}
      #imgLogo1 {position: absolute; top: 0px; left: 0px}
      #tableNavigate {background-color: transparent}
   #divMenuShow {position: fixed; z-index: 11; top: 0px; left: 0px; visibility: hidden; z-index: 10}
      #btnMenuShow              {position: absolute; top:  0px; left:   3px; height: 25px; visibility: hidden}

#divMenu {position: fixed; z-index: 10; top: 0px; left: 0px; visibility: hidden; z-index: 11}
      #btnMenuHide              {position: absolute; top:  0px; left:   3px; height: 25px}
      #btnFileMenu              {position: absolute; top:  0px; left:   40px; height: 25px}
         #btnSaveAsMenu         {position: absolute; top: 25px; left:  45px; width: 150px; height: 25px; text-align: left}
         #btnScreenShotsMenu    {position: absolute; top: 50px; left:  45px; height: 25px; width: 150px; text-align: left}
         #btnCollisionLogMenu   {position: absolute; top: 75px; left:  45px; height: 25px; width: 150px; text-align: left}

#btnObjectsMenu              {position: absolute; top:  0px; left:  80px; height: 25px}
         #btnCreateObjectsMenu     {position: absolute; top: 25px; left:  85px; height: 25px; width: 200px; text-align: left}
         #btnClonesMenu            {position: absolute; top: 50px; left:  85px; height: 25px; width: 200px; text-align: left}
         #btnImportObjectsLiteMenu     {position: absolute; top: 75px; left:  85px; height: 25px; width: 200px; text-align: left}
         //#btnImportObjectsMenu     {position: absolute; top: 100px; left:  85px; height: 25px; width: 200px; text-align: left}
         #btnEditObjectsVectorsMenu{position: absolute; top: 100px; left:  85px; height: 25px; width: 200px; text-align: left}
        #btnEditObjectsElementsMenu{position: absolute; top: 125px; left:  85px; height: 25px; width: 200px; text-align: left}
         #btnVectorMenu            {position: absolute; top: 150px; left:  85px; height: 25px; width: 200px; text-align: left}
         #btnDeleteObjectsMenu     {position: absolute; top: 175px; left:  85px; height: 25px; width: 200px; text-align: left}
         #btnPreTrailsMenu         {position: absolute; top: 200px; left:  85px; height: 25px; width: 200px; text-align: left}
      #btnTimeMenu              {position: absolute; top: 0px;  left: 150px; height: 25px}
         #btnCalendarDate       {position: absolute; top: 25px; left: 155px; height: 25px; width: 170px; text-align: left}
         #btnCalendarDateUTC    {position: absolute; top: 50px; left: 155px; height: 25px; width: 170px; text-align: left}
         #btnJulianDate         {position: absolute; top: 75px; left: 155px; height: 25px; width: 170px; text-align: left}
         #btnTimeStepMenu       {position: absolute; top: 100px; left: 155px; height: 25px; width: 170px; text-align: left}
         #btnSetDateAndTimeMenu {position: absolute; top: 125px; left: 155px; height: 25px; width: 170px; text-align: left}

#btnDisplayMenu           {position: absolute; top:  0px; left: 200px; height: 25px; visibility = 'visible'}
         #btnScreensMenu        {position: absolute; top: 25px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnToFromAMenu        {position: absolute; top: 50px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnToFromBMenu        {position: absolute; top: 75px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnRotatingFrameMenu  {position: absolute; top: 100px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnStereoMenu         {position: absolute; top: 125px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnCitiesAMenu        {position: absolute; top: 150px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnCitiesBMenu        {position: absolute; top: 175px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnStarsMenu          {position: absolute; top: 200px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnCameraAMenu        {position: absolute; top: 225px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnBlankMenu         {position: absolute; top: 250px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnLargePlayMenu      {position: absolute; top: 275px; left:  205px; height: 25px; width: 200px; text-align: left}
         #btnMainMenu      {position: absolute; top: 300px; left:  205px; height: 25px; width: 200px; text-align: left}

#btnPreferencesMenu       {position: absolute; top: 0px; left: 270px; height: 25px}
         #btnScreensMenu        {position: absolute; top: 25px; left:  205px; height: 25px; width: 200px; text-align: left}

#btnAutopilotMenu         {position: absolute; top: 0px; left: 375px; height: 25px}
         #btnAPnowMenu             {position: absolute; top: 25px; left:  380px; height: 25px; width: 150px; text-align: left}
         #btnAPsingleEventsMenu    {position: absolute; top: 50px; left:  380px; height: 25px; width: 150px; text-align: left}
         #btnAPperIterationMenu    {position: absolute; top: 75px; left:  380px; height: 25px; width: 150px; text-align: left}
         #btnAPperGraphicUpdateMenu{position: absolute; top: 100px; left:  380px; height: 25px; width: 150px; text-align: left}

#btnHelpMenu              {position: absolute; top: 0px; left: 455px; height: 25px}
         #btnSimulationDescriptionMenu   {position: absolute; top: 25px; left:  460px; height: 25px; width: 150px; text-align: left}
         #btnQuickHelpMenu   {position: absolute; top: 50px; left:  460px; height: 25px; width: 150px; text-align: left}
         #btnManualMenu   {position: absolute; top: 75px; left:  460px; height: 25px; width: 150px; text-align: left}
         #btnAboutMenu   {position: absolute; top: 100px; left:  460px; height: 25px; width: 150px; text-align: left}

//#divPerspective {position: absolute; z-index: 1; top:1250px; left:0px; width:1250px; height:900px;}
   //#divPerspective {position: absolute; z-index: 1; top:1250px; left: 0px}
   #divPerspective {position: absolute; z-index: 1}
   #divTopDown {position: absolute; z-index: 1; top: 0px; left: 0px; width:1250px; height:900px;}

#divRotateCameraA {top: 800px; left: 0px; height: 125px; width: 570px}
      #lblRotateCameraATitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnRotateCameraAClose {position: absolute; left: 550px}

#rangeRotateCameraA {position: absolute; top:  25px; left: 0px; width: 450px; z-index: 2}
      #txtRotateCameraA {position: absolute; top: 25px; left: 455px; width: 45px}
      #lblRotateCameraA {position: absolute; top: 29px; left: 505px}

#rangeRotateCameraZ {position: absolute; top: 50px; left: 0px; width: 450px; z-index: 2}
      #txtRotateCameraZ {position: absolute; top: 50px; left: 455px; width: 45px}
      #lblRotateCameraZ {position: absolute; top: 54px; left: 505px}

#rangeRotateCameraD {position: absolute; top: 75px; left: 0px; width: 450px; z-index: 2}
      #txtRotateCameraD {position: absolute; top: 75px; left: 455px; width: 45px}
      #lblRotateCameraD {position: absolute; top: 79px; left: 505px}

#selectTargetObjectRF {position: absolute; top: 38px; left: 1px; max-width: 100px; z-index: 2;}
      #lblLonPlus {position: absolute; top: 40px; left: 107px}
      #txtLongitudeRF {position: absolute; top: 36px; left: 117px; width: 40px;}

#radioTrueLongitude {position: absolute; top: 32px; left:  192px; z-index: 2;}
      #lblTrueLongitude   {position: absolute; top: 24px; left: 195px; z-index: 2;}

#radioMeanLongitude {position: absolute; top: 65px; left:  192px; z-index: 2;}
      #lblMeanLongitude   {position: absolute; top: 57px; left: 195px; z-index: 2;}

#checkAxes {position: absolute; top: 100px; left:  262px; z-index: 2;}
      #lblAxes   {position: absolute; top: 104px; left: 282px; z-index: 2;}

#checkStereoCA {position: absolute; top: 100px; left:  312px; z-index: 2;}
      #lblStereoCA   {position: absolute; top: 104px; left: 332px; z-index: 2;}

#checkKeplerCA {position: absolute; top: 100px; left:  357px; z-index: 2;}
      #lblKeplerCA   {position: absolute; top: 104px; left: 377px; z-index: 2;}

#checkTrailsCA {position: absolute; top: 100px; left:  427px; z-index: 2;}
      #lblTrailsCA   {position: absolute; top: 104px; left: 447px; z-index: 2;}

#checkLabelsCA {position: absolute; top: 100px; left:  497px; z-index: 2;}
      #lblLabelsCA   {position: absolute; top: 104px; left: 517px; z-index: 2;}

#divTimeStep {top: 30px; left: 260px; height: 54px;}
      #lblTimeStepTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnPause {position: absolute; top: 25px; left: 3px}
      #btnTimeStepPlus {position: absolute; top: 26px; left: 37px}
      #spanTimeStep {position: absolute; top: 25px; left: 64px; width: 80px}
      #btnTimeStepMinus {position: absolute; top: 26px; left: 180px}

#btnTimeDirection {position: absolute; top: 25px; left: 210px}

#btnTimeStepClose {position: absolute}

#divDistanceAndSpeedA {top:120px; left: 0px; height: 70px; visibility: hidden}
      #lblDistanceAndSpeedATitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #selectTargetObjectDSa {position: absolute; top: 45px; left: 1px; z-index: 2;}
      #selectReferenceObjectDSa {position: absolute; top: 45px; left: 1px; z-index: 2;}
      #lblDSaDistanceA  {position: absolute; top: 25px; left: 3px; width: 160px;}
      #lblDSaSpeedA  {position: absolute; top: 25px; left: 3px; width: 160px;}
      #lblDStangentialA  {position: absolute; top: 25px; left: 3px; width: 160px;}
      #lblDSradialA  {position: absolute; top: 25px; left: 3px; width: 160px;}

#divCalendarDate {top:120px; left: 0px; height: 70px; visibility: hidden}
      #lblCalendarLocalTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #spanCalendarDate{position: absolute; top: 30px; left: 3px;}
      #btnCalendarDateClose {position: absolute;}

#divCalendarDateUTC {top:30px; left: 0px; height: 70px;}
      #lblCalendarUTC {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #spanCalendarDateUTC{position: absolute; top: 30px; left: 3px;}
      #btnCalendarDateUTCClose {position: absolute;}

#divJulianDate {top: 200px; left: 0px; height: 54px; visibility: hidden}
      #lblJulianDateTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #spanJulianDate{position: absolute; top: 30px; left: 3px;} 
      #btnJulianDateClose {position: absolute;}

#divSetTime {top: 90px; left: 300px; height: 180px; visibility: hidden}
      #lblSetTimeTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #lblSetTimeDateAndTime  {position: absolute; top: 25px; left: 3px; width: 160px;}
      #txtSetDateAndTime {position: absolute; top: 50px; left: 3px; width: 160px;}
      #btnSetTimeOK {position: absolute; top:130px; left: 3px; width: 50px;}
      #btnSetTimeClose{position: absolute;}

#divEditObjectsVectors {top: 90px; left: 300px; height: 606px; visibility: hidden}
      #lblEditObjectsVectorsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnEditObjectsVectorsClose{position: absolute;}

#lblSelectTargetObjectEOV {position: absolute; top: 30px; left: 1px}
      #selectTargetObjectEOV {position: absolute; top: 45px; left: 1px; z-index: 2;}

#lblSelectReferenceObjectEOV {position: absolute; top: 80px; left: 1px}
      #selectReferenceObjectEOV {position: absolute; top: 95px; left: 1px; z-index: 2;}

#lblEOVSelectName {position: absolute; top: 125px; left: 1px}
      #txtEOVName {position: absolute; top: 140px; left: 1px}

#lblEditObjectsVectorsColor {position: absolute; top: 180px; left: 1px; width: 60px}
      #txtEditObjectsVectorsColor {position: absolute; top: 195px; left: 1px; width: 60px}

#lblEditObjectsVectorsShadow {position: absolute; top: 180px; left: 63px; width: 60px}
      #txtEditObjectsVectorsShadow {position: absolute; top: 195px; left: 63px; width: 60px}

#lblEditObjectsVectorsLabel {position: absolute; top: 180px; left: 125px; width: 60px}
      #txtEditObjectsVectorsLabel {position: absolute; top: 195px; left: 125px; width: 60px}

#lblEditObjectsVectorsTrail {position: absolute; top: 225px; left: 1px; width: 60px}
      #txtEditObjectsVectorsTrail {position: absolute; top: 240px; left: 1px; width: 60px}

#lblEditObjectsVectorsSubZ {position: absolute; top: 225px; left: 63px; width: 60px}
      #txtEditObjectsVectorsSubZ {position: absolute; top: 240px; left: 63px; width: 60px}

#lblEditObjectsVectorMass {position: absolute; top: 275px; left: 1px}
      #btnEditObjectsVectorMassUnits {position: absolute; top: 270px; left: 60px}
      #txtEditObjectsVectorsMass {position: absolute; top: 290px; left: 1px}

#lblEditObjectsVectorDiameter {position: absolute; top: 325px; left: 1px}
      #btnEditObjectsVectorDiameterUnits {position: absolute; top: 320px; left: 60px}
      #txtEditObjectsVectorsDiameter {position: absolute; top: 340px; left: 1px}

#lblEditObjectsVectorLocation {position: absolute; top: 385px; left: 1px; width: 120px}
      #btnEditObjectsVectorPositionUnits {position: absolute; top: 380px; left: 135px}
      #txtEditObjectsVectorsX {position: absolute; top: 400px; left: 1px}
      #txtEditObjectsVectorsY {position: absolute; top: 420px; left: 1px}
      #txtEditObjectsVectorsZ {position: absolute; top: 440px; left: 1px}

#lblEditObjectsVectorVelocity {position: absolute; top: 485px; left: 1px; width: 120px}
      #btnEditObjectsVectorVelocityUnits {position: absolute; top: 480px; left: 135px}
      #txtEditObjectsVectorsVx {position: absolute; top: 500px; left: 1px}
      #txtEditObjectsVectorsVy {position: absolute; top: 520px; left: 1px}
      #txtEditObjectsVectorsVz {position: absolute; top: 540px; left: 1px}

#btnEditObjectsVectorsApply  {position: absolute; top: 580px; left: 1px}
      #btnEditObjectsVectorsDelete {position: absolute; top: 580px; left: 85px}

#divEditObjectsElements {top: 90px; left: 300px; height: 606px; visibility: hidden}
      #lblEditObjectsElementsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnEditObjectsElementsClose{position: absolute;}

#lblSelectTargetObjectEOE {position: absolute; top: 30px; left: 1px}
      #selectTargetObjectEOE {position: absolute; top: 45px; left: 1px; z-index: 2;}

#lblSelectReferenceObjectEOE {position: absolute; top: 80px; left: 1px}
      #selectReferenceObjectEOE {position: absolute; top: 95px; left: 1px; z-index: 2;}

#lblEOESelectName {position: absolute; top: 125px; left: 1px}
      #txtEOEName {position: absolute; top: 140px; left: 1px}

#lblEditObjectsElementsColor {position: absolute; top: 180px; left: 1px; width: 60px}
      #txtEditObjectsElementsColor {position: absolute; top: 195px; left: 1px; width: 60px}

#lblEditObjectsElementsShadow {position: absolute; top: 180px; left: 63px; width: 60px}
      #txtEditObjectsElementsShadow {position: absolute; top: 195px; left: 63px; width: 60px}

#lblEditObjectsElementsLabel {position: absolute; top: 180px; left: 125px; width: 60px}
      #txtEditObjectsElementsLabel {position: absolute; top: 195px; left: 125px; width: 60px}

#lblEditObjectsElementsTrail {position: absolute; top: 225px; left: 1px; width: 60px}
      #txtEditObjectsElementsTrail {position: absolute; top: 240px; left: 1px; width: 60px}

#lblEditObjectsElementsSubZ {position: absolute; top: 225px; left: 63px; width: 60px}
      #txtEditObjectsElementsSubZ {position: absolute; top: 240px; left: 63px; width: 60px}

#lblEditObjectsElementsMass {position: absolute; top: 275px; left: 1px}
      #btnEditObjectsElementsMassUnits {position: absolute; top: 270px; left: 60px}
      #txtEditObjectsElementsMass {position: absolute; top: 290px; left: 1px}

#lblEditObjectsElementsDiameter {position: absolute; top: 325px; left: 1px}
      #btnEditObjectsElementsDiameterUnits {position: absolute; top: 320px; left: 60px}
      #txtEditObjectsElementsDiameter {position: absolute; top: 340px; left: 1px}

#lblEditObjectsElementsLocation {position: absolute; top: 385px; left: 1px; width: 120px}
      #btnEditObjectsElementsPositionUnits {position: absolute; top: 400px; left: 156px}
      #txtEditObjectsElementsX {position: absolute; top: 400px; left: 1px; width: 150px}
      #txtEditObjectsElementsY {position: absolute; top: 420px; left: 1px; width: 150px}
      #txtEditObjectsElementsZ {position: absolute; top: 440px; left: 1px; width: 150px}

#lblEditObjectsElementsVelocity {position: absolute; top: 485px; left: 1px; width: 120px}
      #txtEditObjectsElementsVx {position: absolute; top: 500px; left: 1px; width: 150px}
      #txtEditObjectsElementsVy {position: absolute; top: 520px; left: 1px; width: 150px}
      #txtEditObjectsElementsVz {position: absolute; top: 540px; left: 1px; width: 150px}

#btnEditObjectsElementsApply  {position: absolute; top: 580px; left: 1px}
      #btnEditObjectsElementsDelete {position: absolute; top: 580px; left: 85px}

#divStars {top:30px; left: 260px; height: 360px; visibility: hidden;}
      #lblStarsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnStarsClose {position: absolute;}

#lblSelectStars {position: absolute; top: 30px; left: 1px}
      #selectStars {position: absolute; top: 45px; left: 1 px; z-index: 2}
      #lblStarBrightness{position: absolute; top: 75px; left: 1px}
      #txtStarBrightness{position: absolute; top: 90px; left: 1px}

#hrStars{position: absolute; top: 120px; width: 100%}
      #checkRaDec {position: absolute; top: 140px; left: 3px; z-index: 2}
      #lblRaDec {position: absolute; top: 143px; left: 24px; width: 90px; z-index: 2;}

#checkConstellationBoundaries {position: absolute; top: 140px; left: 110px; z-index: 2}
      #lblBoundaries {position: absolute; top: 143px; left: 131px; width: 90px; z-index: 2;}
	  
	  
      #lblGridBrightness {position: absolute; top: 163px; left:1px;}
      #txtGridBrightness {position: absolute; top: 178px; left: 1px}

#lblRaSpacing {position: absolute; top: 208px; left: 1px}
      #txtRaSpacing {position: absolute; top: 223px; left: 1px}

#lblDecSpacing {position: absolute; top: 253px; left: 1px}
      #txtDecSpacing {position: absolute; top: 268px; left: 1px}

#lblGridColor {position: absolute; top: 298px; left: 1px}
      #txtGridColor {position: absolute; top: 313px; left: 1px}

#divRotatingFrame {top:30px; left: 260px; height: 160px; visibility: hidden;}
      #lblRotatingFrameTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnRotatingFrameClose {position: absolute;}

#lblTargetObjectRF {position: absolute; top: 20px; left: 0px; z-index: 2;}

#lblReferenceObjectRF {position: absolute; top: 70px; left: 0px; z-index: 2;}
      #selectReferenceObjectRF {position: absolute; top: 90px; left: 0px; z-index: 2;}

#lblLongitudeRF {position: absolute; top: 120px; left: 0px; z-index: 2; visibility: hidden;}

#lblAltitudeRF {position: absolute; top: 170px; left: 0px; z-index: 2; visibility: hidden}
      #txtAltitudeRF {position: absolute; top: 190px; left: 3px; width: 160px; visibility: hidden;}

#lblDistanceRF {position: absolute; top: 220px; left: 0px; z-index: 2; visibility: hidden;}
      #txtDistanceRF {position: absolute; top: 240px; left: 3px; width: 160px; visibility: hidden;}

#checkRF {position: absolute; top: 270px; left: 3px; z-index: 2; visibility: hidden;}

#divLargerPlayButton {position: fixed; top: 0px; left: 0px; visibility: hidden; z-index: 2}
      #btnLargerPlayButton{position: absolute; top: 300px; background-image:url('http://orbitsimulator.com/gravitySimulatorCloud/playButton.png'); z-index: 3;}

#btnCreatePreTrails {position: absolute; top: 210px; left: 20px}

#divCitiesA{top: 30px; left:500px; height: 200px; visibility: hidden}
      #lblCitiesTitleA {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnCitiesCloseA {position: absolute}
      #selectCitiesA       {position: absolute; top: 40px;  left: 0px; z-index: 2}
      #lblLatitudeCitiesA   {position: absolute; top: 85px;  left: 0px; z-index: 2}
      #txtLatitudeCitiesA   {position: absolute; top: 105px; left: 0px; z-index: 2}
      #lblLongitudeCitiesA  {position: absolute; top: 140px; left: 0px; z-index: 2}
      #txtLongitudeCitiesA  {position: absolute; top: 165px; left: 0px; z-index: 2}

#divCitiesB{top: 30px; left:500px; height: 200px; visibility: hidden}
      #lblCitiesTitleB {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnCitiesCloseB {position: absolute}
      #selectCitiesB       {position: absolute; top: 40px;  left: 0px; z-index: 2}
      #lblLatitudeCitiesB   {position: absolute; top: 85px;  left: 0px; z-index: 2}
      #txtLatitudeCitiesB   {position: absolute; top: 105px; left: 0px; z-index: 2}
      #lblLongitudeCitiesB  {position: absolute; top: 140px; left: 0px; z-index: 2}
      #txtLongitudeCitiesB  {position: absolute; top: 165px; left: 0px; z-index: 2}

#divToFromA {top:30px; left: 260px; height: 490px; visibility: hidden}
      #lblToFromATitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnToFromAClose {position: absolute;}

#lblTargetObjectA {position: absolute; top: 20px; left: 0px; z-index: 2;}
      #selectTargetObjectA {position: absolute; top: 40px; left: 0px; z-index: 2;}

#lblCameraObjectA {position: absolute; top: 70px; left: 0px; z-index: 2;}
      #selectCameraObjectA {position: absolute; top: 90px; left: 0px; z-index: 2;}

#spanBarycenterCheckBoxA {position: absolute; top: 120px; left: 0px; width: 90px; z-index: 2;}
      #checkBarycenterPerspectiveA {position: absolute; top: 120px; left: 100px; z-index: 2;}

#lblMinimumObjectSizeA {position: absolute; top: 150px; left: 0px; z-index: 2;}
      #txtMinimumObjectSizeA {position: absolute; top: 170px; left: 0px; z-index: 2;}

#lblTrailSizeA {position: absolute; top: 200px; left: 0px; z-index: 2;}
      #txtTrailSizeA {position: absolute; top: 220px; left: 0px; z-index: 2}

#lblZoomA {position: absolute; top:246px; left: 0px; z-index:2}
      #pZoomInA {position: absolute; top: 270px; left: 0px; z-index:2}
      #txtFOVa  {position: absolute; top:270px; left: 30px; z-index:2}
      #pZoomOutA {position: absolute; top: 270px; left: 180px; z-index:2}

#checkStarsA {position: absolute; top: 310px; left: 0px; z-index: 2;}
      #lblStarsA {position: absolute; top: 310px; left: 20px; width: 90px; z-index: 2;}

#checkStarsLabelsA {position: absolute; top: 335px; left: 0px; z-index: 2;}
      #checkStarsProperA {position: absolute; top: 335px; left: 20px; z-index: 2;}
      #lblStarsLabelsA {position: absolute; top: 335px; left: 40px; width: 90px; z-index: 2;}

#checkKBOsA {position: absolute; top: 360px; left: 0px; z-index: 2;}
      #lblKBOsA {position: absolute; top: 360px; left: 20px; width: 90px; z-index: 2;}

#checkPreTrailsA {position: absolute; top: 385px; left: 0px; z-index: 2;}
      #lblPreTrailsA {position: absolute; top: 385px; left: 20px; width: 90px; z-index: 2;}

#checkCrescentsA {position: absolute; top: 410px; left: 0px; z-index: 2;}
      #lblCrescentsA {position: absolute; top: 410px; left: 20px; width: 90px; z-index: 2;}

#checkSunGraphicA {position: absolute; top: 435px; left: 0px; z-index: 2;}
      #lblSunGraphicA {position: absolute; top: 435px; left: 20px; width: 90px; z-index: 2;}

#checkLabelsA    {position: absolute; top: 460px; left: 0px;}
      #lblLabelsA {position: absolute; top: 460px; left: 20px}
      #txtFontA {position: absolute; top: 460px; left:  80px;}

#divToFromB {top:330px; left: 260px; height: 294px; visibility: hidden;}
      #lblToFromBTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnToFromBClose {position: absolute;}

#lblTargetObjectB{position: absolute; top: 20px; left: 0px; z-index: 2;}
      #selectTargetObjectB {position: absolute; top: 40px; left: 0px; z-index: 2;}

#lblCameraObjectB {position: absolute; top: 70px; left: 0px; z-index: 2;}
      #selectCameraObjectB {position: absolute; top: 90px; left: 0px; z-index: 2;}

#spanBarycenterCheckBoxB {position: absolute; top: 120px; left: 0px; width: 90px; z-index: 2;}
      #checkBarycenterPerspectiveB {position: absolute; top: 120px; left: 100px; z-index: 2;}

#lblMinimumObjectSizeB {position: absolute; top: 150px; left: 0px; z-index: 2;}
      #txtMinimumObjectSizeB {position: absolute; top: 170px; left: 0px; z-index: 2;}

#lblTrailSizeB {position: absolute; top: 200px; left: 0px; z-index: 2;}
      #txtTrailSizeB {position: absolute; top: 220px; left: 0px; z-index: 2}

#lblZoomB {position: absolute; top:246px; left: 0px; z-index:2}
      #pZoomInB {position: absolute; top: 270px; left: 0px; z-index:2}
      #txtFOVb  {position: absolute; top:270px; left: 30px; z-index:2}
      #pZoomOutB {position: absolute; top: 270px; left: 180px; z-index:2}

#checkStarsB {position: absolute; top: 310px; left: 0px; z-index: 2;}
      #lblStarsB {position: absolute; top: 310px; left: 20px; width: 90px; z-index: 2;}

#checkStarsLabelsB {position: absolute; top: 335px; left: 0px; z-index: 2;}
      #lblStarsLabelsB {position: absolute; top: 335px; left: 20px; width: 90px; z-index: 2;}

#checkKBOsB {position: absolute; top: 360px; left: 0px; z-index: 2;}
      #lblKBOsB {position: absolute; top: 360px; left: 20px; width: 90px; z-index: 2;}

#checkPreTrailsB {position: absolute; top: 385px; left: 0px; z-index: 2;}
      #lblPreTrailsB {position: absolute; top: 385px; left: 20px; width: 90px; z-index: 2;}

#checkCrescentsB {position: absolute; top: 410px; left: 0px; z-index: 2;}
      #lblCrescentsB {position: absolute; top: 410px; left: 20px; width: 90px; z-index: 2;}

#checkSunGraphicB {position: absolute; top: 435px; left: 0px; z-index: 2;}
      #lblSunGraphicB {position: absolute; top: 435px; left: 20px; width: 90px; z-index: 2;}

#checkLabelsB    {position: absolute; top: 460px; left: 0px;}
      #lblLabelsB {position: absolute; top: 460px; left: 20px}
      #txtFontB {position: absolute; top: 460px; left:  80px;}

#divScreenShotImage {top:200px; left: 600px; width: 300px; height: 200px; visibility: hidden;}
      #lblScreenShotImageTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnScreenShotImageClose {position: absolute; left: 275px; z-index: 2}
      #imgScreenShotImage {position: absolute; top: 0px; left: 0px; width: 298px; height: 198px}

#divOutputFile {top:200px; left: 600px; width: 300px; height: 200px; visibility: hidden;}
      #checkCreateDataFile{}
      #lblSampleEvery{}
      #txtSampleEvery{}

#lblMaxDataSamples{}
      #txtMaxDataSamples{}

#checkDataSma{}
      #checkDataEcc{}
      #checkDataInc{}
      #checkDataNode{}
      #checkDataPeri{}
      #checkDataMa{}
      #checkDataRx{}
      #checkDataRy{}
      #checkDataRz{}
      #checkDataVx{}
      #checkDataVy{}
      #checkDataVz{}
      #selectDataObjects{}

#divQuickHelp {top:200px; left: 600px; width: 200px; height: 300px; visibility: hidden}
      #lblQuickHelpTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnQuickHelpClose {position: absolute; left: 180px}
      #txtAreaQuickHelp {position: absolute; top: 20px; left: 1px; width: 198px; height: 298px}

#divAPsingleEvents {top:200px; left: 600px; width: 400px; height: 370px; visibility: hidden;}
      #lblAPsingleEventsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnAPsingleEventsClose {position: absolute; left: 380px}
      #txtAreaAPsingleEvents {position: absolute; top: 20px; left: 1px; width: 398px; height: 300px}
      #btnAPsingleEventsUpdate {position: absolute; top: 340px; left: 1px}

#divAPnow {top:200px; left: 600px; width: 400px; height: 370px; visibility: hidden;}
      #lblAPnowTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnAPnowClose {position: absolute; left: 380px}
      #txtAreaAPnow {position: absolute; top: 20px; left: 1px; width: 398px; height: 300px}
      #btnAPnowUpdate {position: absolute; top: 340px; left: 1px}

#divAPperIteration {top:200px; left: 600px; width: 400px; height: 370px; visibility: hidden;}
      #lblAPperIterationTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnAPperIterationClose {position: absolute; left: 380px}
      #txtAreaAPperIteration {position: absolute; top: 20px; left: 1px; width: 398px; height: 300px}
      #btnAPperIterationUpdate {position: absolute; top: 340px; left: 1px}

#divAPperGraphicUpdate {top:200px; left: 600px; width: 400px; height: 370px; visibility: hidden;}
      #lblAPperGraphicUpdateTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnAPperGraphicUpdateClose {position: absolute; left: 380px}
      #txtAreaAPperGraphicUpdate {position: absolute; top: 20px; left: 1px; width: 398px; height: 300px}
      #btnAPperGraphicUpdateUpdate {position: absolute; top: 340px; left: 1px}

#divScreenShots {top:200px; left: 600px; height: 560px; visibility: hidden;}
      #lblScreenShotsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnScreenShotsClose {position: absolute;}

#btnTakeScreenShots {position: absolute; top: 28px; left: 0px;}

#lblScreenShotsDimensions {position: absolute; top: 108px; left: 0px}
      #txtScreenShotDimensions {position: absolute; top: 128px; left: 0px}

#checkScreenShotsCls{position: absolute; top:158px; left: 0px}
      #lblScreenShotsCls{position: absolute; top: 158px; left: 25px}

#checkScreenShotsAforeground{position: absolute; top: 188px; left: 0px;}
      #lblscreenShotsAforeground{position: absolute; top: 188px; left: 25px;}

#checkScreenShotsAbackground{position: absolute; top: 218px; left: 0px;}
      #lblscreenShotsAbackground{position: absolute; top: 218px; left: 25px;}

#lblScreenShotsAposition {position: absolute; top: 248px; left: 0px}
      #txtScreenShotsAposition {position: absolute; top: 268px; left: 0px}

#checkScreenShotsBforeground{position: absolute; top: 298px; left: 0px;}
      #lblscreenShotsBforeground{position: absolute; top: 298px; left: 25px;}

#checkScreenShotsBbackground{position: absolute; top: 328px; left: 0px;}
      #lblscreenShotsBbackground{position: absolute; top: 328px; left: 25px;}

#lblScreenShotsBposition {position: absolute; top: 358px; left: 0px}
      #txtScreenShotsBposition {position: absolute; top: 378px; left: 0px}

#lblScreenShotData {position: absolute; top:408px; left: 0px}

#divPreferences {top:20px; left: 100px; height: 360px; visibility: hidden}
      #lblPreferencesTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnPreferencesClose {position: absolute;}

#lblDoEvents {position: absolute; top: 28px; left: 0px}
      #txtDoEvents {position: absolute; top: 48px; left: 0px}

#lblSelectIntegrator {position: absolute; top: 85px; left: 0px;}
      #selectIntegrator {position: absolute; top: 105px; left: 0px; z-index: 2;}

#lblStepsPerRadian {position: absolute; top: 135px; left: 0px;}
      #txtStepsPerRadian {position: absolute; top: 165px; left: 0px;}
      #lblEventsDuration {position: absolute; top: 200px; left: 0px}
      #txtEventsDuration {position: absolute; top: 220px; left: 0px}

#lblOpacity {position: absolute; top: 255px; left: 0px}
      #txtOpacity {position: absolute; top: 270px; left: 0px}

#checkMedia {position: absolute; top: 300px; left: 1px}
      #lblMedia {position: absolute; top: 300px; left: 20px}

#checkRealTime {position: absolute; top: 330px; left: 1px}
      #lblRealTime {position: absolute; top: 330px; left: 20px}

#divCollisionLog {top:20px; left: 100px; height: 75px; width: 580px; visibility: hidden}
      #lblCollisionLogTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnCollisionLogClose {position: absolute; left: 558px}
      #txtAreaCollisionLog {position: absolute; top: 20px; left: 1px; width: 578px; height: 54px;}

#divSimulationDescription {top:20px; left: 150px; height: 75px; width: 580px; visibility: hidden}
      #lblSimulationDescriptionTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnSimulationDescriptionClose {position: absolute; left: 558px}
      #txtAreaSimulationDescription {position: absolute; top: 20px; left: 1px; width: 578px; height: 54px;}

#divScreens {position: fixed; z-index: 2; top:200px; left: 600px; width: 250px; height: 40px; opacity: 0.8; background-color: #111111; border: none;  visibility: hidden;}

#divEccentricity {position: absolute; z-index: 2; top:10px; left: 555px; width: 250px; height: 40px; opacity: 0.8; background-color: #111111; border: none; visibility: hidden;}
   #divSMA {position: absolute; z-index: 2; top:60px; left: 555px; width: 250px; height: 40px; opacity: 0.8; background-color: #111111; border: none; visibility: hidden;}

#divVectors {top:30px; left: 350px; width: 170px; height: 420px; visibility: hidden;}
      #lblVectorsTitle{position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnVectorsClose {position: absolute; left: 150px}
      #selectvectorObj1A {position: absolute; top: 25px;  left: 1px; z-index: 2}
      #selectvectorObj2A {position: absolute; top: 45px;  left: 1px; z-index: 2}

#btnPositionUnits {position: absolute; top: 75px; left: 1px; width: 150px}
      #txtObjx {position: absolute; top:95px; left: 1px}
      #txtObjy {position: absolute; top:115px; left: 1px}
      #txtObjz {position: absolute; top:135px; left: 1px}

#btnVelocityUnits {position: absolute; top:165px; left: 1px; width: 150px}
      #txtObjvx {position: absolute; top:185px; left: 1px}
      #txtObjvy {position: absolute; top: 205px; left: 1px}
      #txtObjvz {position: absolute; top: 225px; left: 1px}

#lblDistanceAndSpeed {position: absolute; top:255px; left: 1px; color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif}
      #txtDistance{position: absolute; top: 280px; left: 1px}
      #txtSpeed{position: absolute; top: 300px; left: 1px}

#spanTangentialSpeedVectors {position: absolute; top: 330px; left: 1px; color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif}
      #lblTangentialSpeedVectors {position: absolute; top: 355px; left: 1px}

#spanRadialVelocityVectors {position: absolute; top: 380px; left: 1px; color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif}
      #lblRadialVelocityVectors {position: absolute; top: 400px; left: 1px}

#divFocusObject {position: fixed; z-index: 2; top:680px; left: 20px; width: 250px; height: 40px; opacity: 0.8; background-color: #111111; border: none;  visibility: hidden;}

#divCreateObjects {top:200px; left: 600px; width: 650px; height: 460px; visibility: hidden;}
      #lblCreateObjectsTitle{position: absolute; top: 0px; left: 0px; width: 650px; z-index: 2;}
      #btnCreateObjectsClose {position: absolute; left: 630px}
      #tblCreateObjects {position: absolute; left: 0px; top: 30px}
      #btnCreateObjects {position: absolute; left: 0px; top: 430px; z-index: 3;}

#divClones {top: 200px; left:300px; height: 450px; width: 920px; visibility: hidden}
      #lblClonesTitle{position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnClonesClose {position: absolute; left: 900px}

#lblClonesPaste {position: absolute; top: 30px; left: 0px;}
      #txtClonesPaste {position: absolute; top: 50px; left: 0px;}
      #btnClonesPaste {position: absolute; top: 75px; left: 0px;}
      #tableCloneElements {position: absolute; top: 105px; left: 0px;}
      #tableCloneCovarianceMatrix {position: absolute; top: 225px; left: 0px;}
      #btnCreateClones {position: absolute; top: 405px; left: 0px;}

#divSaveAs {top:200px; left: 600px; height: 698px; visibility: hidden}
      #lblSaveAsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}

#lblSaveAsFileName {position: absolute; top: 25px; left: 0px; z-index: 2;}
      #txtSaveAsFileName {position: absolute; top: 45px; left: 0px; z-index: 2;}

#lblSaveAsKeywords {position: absolute; top: 75px; left: 0px; z-index: 2;}
      #txtSaveAsKeywords {position: absolute; top: 95px; left: 0px; z-index: 2;}
      
      #lblSaveAsDescription {position: absolute; top: 125px; left: 0px; z-index: 2;}
      #txtAreaSaveAsDescription {position: absolute; top: 145px; left: 0px; width: 240px; height: 200px; z-index: 2;}

#lblSaveAsAuthor {position: absolute; top: 365px; left: 0px; z-index: 2;}
      #txtSaveAsAuthor {position: absolute; top: 385px; left: 0px; z-index: 2;}
   
      #lblSaveAsTempLink {position: absolute; top: 415px; left: 20px; z-index: 2;}
      #checkSaveAsTempLink {position: absolute; top: 415px; left: 0px; z-index: 2;}

#lblSaveAsShare {position: absolute; top: 435px; left: 20px; z-index: 2;}
      #checkSaveAsShare {position: absolute; top: 434px; left: 0px; z-index: 2;}

#btnSaveAs {position: absolute; top: 465px; left: 0px; z-index: 2;}

#lblSaveAsAddress {position: absolute; top: 495px; left: 0px; z-index: 2;}
      #spanSimURL {position: absolute; top: 515px; left: 0px; width: 245px; height: 60px z-index: 2;}

//#btnSaveAsNavigateTo {position: absolute; top:515px; left: 0px; z-index: 3;}

#lblSaveAsSourceCode {position: absolute; top: 595px; left: 0px; z-index: 2;}
      #txtAreaSaveAs {position: absolute; top:615px; left: 0px; width: 245px; height: 80px; z-index: 2;}

#btnSaveAsClose {position: absolute}

#divImportObjectsLite {top:210px; left: 600px; height: 110px; visibility: hidden}
      #lblImportObjectsLiteTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnImportObjectsLiteClose {position: absolute}
      #txtImportObjectsLite {position: absolute; top: 30px; left: 1px; width: 150px}
      #btnImportObjectsLite {position: absolute; top: 55px; left: 1px}
      #lblImportObjectsLite {position: absolute; top: 80px; left: 1px}
      #txtImportColor {position: absolute; top: 30px; left: 160px; width: 60px}

#divImportObjects {top:210px; left: 600px; width: 355px; height: 560px; visibility: hidden}
      #lblImportObjectsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnImportObjectsClose {position: absolute; left: 334px}
      #checkDeleteExistingObjects{position: absolute; left: 1px; top: 35px}
      #lblDeleteExistingObjects {position: absolute; left: 25px; top: 28px; width: 100px;}
      #lblImportSetTimeDateAndTime  {position: absolute; top: 30px; left: 130px; width: 165px;}
      #txtImportSetDateAndTime {position: absolute; top: 45px; left: 130px; width: 165px;}
      #btnImportNow {position: absolute; top: 45px; left:300px}

#divImportButtons {position: absolute; top: 80px; left: 1px: height: 100px}
      #txtAreaObjects {position: absolute; width: 350px; height: 300px; top: 215px}
      #btnImportObjects{position: absolute; top: 530px}

#divDeleteObjects {top:200px; left: 600px; height: 500px; visibility: hidden}
      #lblDeleteObjectsTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #btnDeleteObjectsClose {position: absolute}
      #divDeleteList{position: absolute; top: 20px; left: 0px; width: 100%; height: 440px; overflow: scroll}
      #btnDeleteList{position: absolute; top: 466px; left: 1px;}
      #btnDeleteExistingObjects{position: absolute; top: 466px; left: 125px}

#divPreTrailObjectList {top:200px; left: 600px; height: 500px; visibility: hidden}
      #lblPreTrailObjectListTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
      #divPTOList{position: absolute; top: 20px; left: 0px; width: 100%; height: 440px; overflow: scroll}
      #btnPreTrailObject{position: absolute; top: 466px;}
      #btnPreTrailObjectListClose {position: absolute}

.classNewDiv {color: cyan; background-color: Transparent; font-family: 'Lucida Console', Monaco, monospace; font-size: 12px; z-index: 2; border: none; opacity:0.8}
  .classNewDivButton {width: 30px; height: 30px; border-radius: 6px;}
  
      .classBtnOptions { z-index: 3;
                    position: absolute;
					top: 0px; left: 115px;
					width: 35px; height: 35px;
                    
                    background-repeat:no-repeat;
                   -webkit-border-radius: 12px;
                   -moz-border-radius: 12px;
                    border-radius: 12px;
                   -webkit-border-radius: 12px;
                   -moz-border-radius: 12px;
                    background: transparent;
                    //opacity: 0.8;
                    background-color: #000020;
                    color: green;
                    border-color: #3b8e92;
					background-size: 32px;
					background-image: url("http://orbitsimulator.com/gravitySimulatorCloud/gearImg.png");
					visibility: hidden;
   }
   
       .classBtnMacro { z-index: 3;
                    position: absolute;
					top: 0px; left: 115px;
					width: 73px; height: 73px;
                    background-repeat:no-repeat;
                   -webkit-border-radius: 12px;
                   -moz-border-radius: 12px;
                    border-radius: 12px;
                   -webkit-border-radius: 12px;
                   -moz-border-radius: 12px;
                    background: transparent;
                    //opacity: 0.8;
                    background-color: #000020;
                    color: green;
                    border-color: #3b8e92;
					//background-size: 32px;
   }
   
   .divCheck {position: absolute; top:0px; left:75px; width: 35px; height: 35px; cursor:pointer; background-image: url("http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF");}
  .classLblCheck {position: absolute; top: 7px; left: 0px;}
  .btnCheck {position: absolute; top: 0px; left: 0px;}
  #btnOptionHeliocentric {background-image:url('http://orbitsimulator.com/gravitySimulatorCloud/sunIcon2.GIF')}
  #btnOptionGeocentric {background-image:url('http://orbitsimulator.com/gravitySimulatorCloud/earthIcon2.GIF');}
  #btnOptionSkyView {background-image:url('http://orbitsimulator.com/gravitySimulatorCloud/skyIcon2.GIF');}
  #divBigA {position: absolute; top: 20px; left: 0px; width: 1px; height: 1px; border-style: none;}
  #divHorizontal {position: absolute; top: 20px; left: 110px; height: 12px; width: 812px;}
  #divZoomBar {background-color: #000055; position: absolute; left:0px; top:0px; width:300px; height:30px; border-radius: 25px;}
  #divZoom{background-image: linear-gradient(blue 0%, cyan 98%); position: absolute; width: 60px; height: 30px; top: 0px; border-radius: 25px;}
  #divAzimuthBar {background-color: #000055; position: absolute; left: 0px; top:40px; width: 300px; height:30px; border-radius: 25px}
  #divAzimuth {background-image: linear-gradient(blue 0%, cyan 98%); position: absolute; width: 60px; height: 30px; top: 0px; border-radius: 25px;}
  
  #divPlayPause {position: absolute; top: 150px; height: 100px; width: 100px}
  
  #divVertical {position: absolute; top: 20px; left:0px; height: 812px; width: 100px; border-style: none;}
  #divAltitudeBar {background-color: #000055; position: absolute; left: 50px; top: 0px; width: 30px; height: 300px; border-radius: 25px;}
  #divAltitude {background-image: linear-gradient(blue 0%, cyan 98%); background-color: purple; position: absolute; width: 30px; height: 60px; left: 0px; border-radius: 25px;}
  #divDistanceBar {background-color: #000055; position: absolute; left:10px; top:0px; width: 30px; height: 300px; border-radius: 25px;}
  #divDistance {background-image: linear-gradient(blue 0%, cyan 98%); background-color: purple; position: absolute; width: 30px; height: 60px; left: 0px; border-radius: 25px;}
  #spanTo {position: absolute; top:-10px; left: 320px; width: 112px; height: 60px;}
  #spanFrom {position: absolute; top:30px; left: 320px; width: 112px; height: 49px;}
  
  #btnPlayMedium {position: absolute; top: 100px; left: 130px; background-image:url('http://orbitsimulator.com/gravitySimulatorCloud/playButton.png'); background-size: 110px;}
  #btnDirectionMedium {position: absolute; top: 100px; left: 0px; background-image:url('http://orbitsimulator.com/gravitySimulatorCloud/forwardButton.png'); background-size: 110px;}
  #spanView {position: absolute; top: 230px; left: 5px; width: 100px}
 
 
  #spanOrbits {position: absolute; top: 320px; left: 10px; width: 100px;}
  #spanTrails {position: absolute; top: 360px; left: 10px; width: 100px;}
  #spanAxes {position: absolute; top: 400px; left: 10px; width: 100px;}
  #span3d {position: absolute; top: 520px; left: 10px; width: 100px;}
  #spanNames {position: absolute; top: 440px; left: 10px; width: 50px;}
  #spanStars {position: absolute; top: 480px; left: 10px; width: 100px}
  #spanRF {position: absolute; top: 560px; left:10px; width: 100px}
  #lblRF {top: 0px; font-size: 15px;}
  #lblRF2 {top: 20px; font-size: 15px;}

#select1 {width: 140px; max-width: 140px; font-size: 16px; background-color: #0000BB; color: #00FFFF; border-radius: 3px}
  #select2 {width: 140px; max-width: 140px; font-size: 16px; background-color: #0000BB; color: #00FFFF; border-radius: 3px}
  #btnOptionCities {position: absolute; top: 40px; left: 50px}

.classControlDiv {position: fixed; width: 250px; border: 1px solid blue; background-color: rgba(0,0,255,0.1); z-index: 2;}
   .classControlTitle {width: 100%; background-color: rgba(0, 0, 200, 0.8); color: white; font-family: Tahoma, Geneva, sans-serif; z-index: 2;}
   .classLblData {color: cyan; background-color: Transparent; font-family: 'Lucida Console', Monaco, monospace; font-size: 12px; z-index: 2; border: none; opacity:0.8}
   .classTxtInput {color: white; background-color: black; z-index: 2; opacity: 0.8}
   .classSelect   {color: white;  background-color: red; z-index: 2; border: none; opacity: 0.8}

.classBtn {-webkit-border-radius: 5px;
              -moz-border-radius: 5px;
               border-radius: 5px;
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
               background: transparent;
               opacity: 0.8;
               background-color: #000020;
               color: cyan;
               border-color: #3b8e92;
   }
   .classTxtColor {-webkit-border-radius: 5px;
              -moz-border-radius: 5px;
               border-radius: 5px;
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
               background: transparent;
               opacity: 0.8;
               background-color: #000020;
               color: cyan;
               border-color: #3b8e92;
   }

.classBtnSmall { z-index: 3;
                    width: 20px; height: 20px;
                   -webkit-border-radius: 15px;
                   -moz-border-radius: 15px;
                    border-radius: 15px;
                   -webkit-border-radius: 15px;
                   -moz-border-radius: 15px;
                    background: transparent;
                    opacity: 0.8;
                    background-color: #000020;
                    color: cyan;
                    border-color: #3b8e92;
   }

.classBtnPlay2 { //delete me
height: 460px;
width: 460px;  
background-image:url('http://orbitsimulator.com/gravitySimulatorCloud/playButton.png');
background-repeat:no-repeat;
}
   .classBtnPlay { z-index: 3;
                    width: 460px; height: 460px;
                    
                    background-repeat:no-repeat;
                   -webkit-border-radius: 150px;
                   -moz-border-radius: 150px;
                    border-radius: 150px;
                   -webkit-border-radius: 150px;
                   -moz-border-radius: 150px;
                    background: transparent;
                    opacity: 0.8;
                    background-color: #000020;
                    color: cyan;
                    border-color: #3b8e92;
   }

.classBtnPlayMedium { z-index: 3;
                    width: 115px; height: 115px;
                    
                    background-repeat:no-repeat;
                   -webkit-border-radius: 38px;
                   -moz-border-radius: 38px;
                    border-radius: 38px;
                   -webkit-border-radius: 38px;
                   -moz-border-radius: 38px;
                    background: transparent;
                    //opacity: 0.8;
                    background-color: #000020;
                    color: green;
                    border-color: #3b8e92;
   }

* {-webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
       box-sizing: border-box;
   }

.classTable{color: cyan; background-color:#111111; opacity: 0.8}

.classBtnUnit {
       width: 40px;
       color: cyan;
       background-color: Transparent;
       background-repeat:no-repeat;
       border: none;
       cursor:pointer;
       overflow: hidden;
       outline:none;
   }

.classMenuButton:hover {background: #383;}

.classBtnClose {
                    z-index: 3;
                    width: 20px; height: 20px; left: 228px; top: 0px;
                    -webkit-border-radius: 15px;
                    -moz-border-radius: 5px;
                     border-radius: 5px;
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                     background: transparent;
                     opacity: 0.8;
                     background-color: #000020;
                     color: red;
                     border-color: #928e3b;}

.classMenuButton {color: cyan; background-color: black; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; 
                      font-size: 16px; font-family: Geneva, Tahoma, Verdana, sans-serif; opacity: 0.8;
    }

#btnViewMenu {
       //position: absolute;
       //top: 3px;
       //left: 71px;
    }

//#lblLabelsA {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblScreens {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblScreenShots {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblScreenWidth {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #spanScreenWidth {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblPreferences {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblDoEvents {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblEventsDuration {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblUpdateGraphics {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblMinimumObjectSize {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblDivEccentricity {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblEccentricity {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblDivSMA {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblSMA {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}
   #lblFocusObject {color: cyan; font-family: Geneva, Tahoma, Verdana, sans-serif;}

#canvasPixels {
      position: absolute;
      z-index: 1;
      top: 0px;
      left: 0px;
      background-color:#000000;
   }

#foregroundLayer {
      position: absolute;
      z-index: 2;
      top: 0px;
      left: 0px;
   }

#canvasPixelsPerspectiveA {
      position: absolute;
      z-index: 1;
      top: 0px;
      left: 0px;
      background-color:#000000;
   }

#foregroundLayerPerspectiveA {
      position: absolute;
      z-index: 2;
      top: 0px;
      left: 0px;
   }

#trailLayerPerspectiveA {
      position: absolute;
      z-index: 2;
      top: 0px;
      left: 0px;
   }

#canvasPixelsPerspectiveB {
      position: absolute;
      z-index: 1;
      top: 0px;
      left: 5000px;
      background-color:#000000;
   }

#foregroundLayerPerspectiveB {
      position: absolute;
      z-index: 2;
      top: 0px;
      left: 5000px;
   }

#trailLayerPerspectiveB {
      position: absolute;
      z-index: 2;
      top: 0px;
      left: 5000px;
   }

//delete this one after all uses have been transfered to classBtnClose
   .btnClose {
      position: absolute;
      top: 0px;
      width: 15px;
      height: 15px;
      background-color: red;
      font-size: 8px;
      font-weight: bold;
      visibility: hidden;
   }

#btnEccentricityClose {left: 235px} 
   #btnSMAClose {left: 235px}

#divStereo {top: 660px; left: 4px; height: 165px; visibility: hidden}
         #lblStereoTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
         #checkStereo {position: absolute; top: 25px; left: 0px;}
         #lblStereo   {position: absolute; top: 25px; left: 22px;}

#radioCrosseye {position: absolute; top: 145px; left: 0px; }
         #lblRCrosseye   {position: absolute; top: 145px; left: 22px; }

#radioParallel {position: absolute; top: 125px; left: 0px;}
         #lblRParallel   {position: absolute; top: 125px; left: 22px; }

#txtBaseline   {position: absolute; top: 65px; left: 0px; z-index: 2; }
         #lblBaseline   {position: absolute; top: 85px; left: 0px; width:100px;}
         #btnStereoClose   {position: absolute;}
		 
	  #divBlank {top: 660px; left: 4px; height: 165px; visibility: hidden}
         #lblBlankTitle {position: absolute; top: 0px; left: 0px; z-index: 2;}
         #btnBlankClose   {position: absolute;}
		 
</style>
<script src="http://orbitsimulator.com/gravitySimulatorCloud/stars716DynamicWithNames.js" type="text/javascript"></script></head>

<div class="classControlDiv ui-draggable" id="divStereo" style="visibility: hidden; left: 142px; top: 369px;" onmouseover="hideAllMenuButtons()">
   <label class="classControlTitle" id="lblStereoTitle">Stereo</label>
   <input id="checkStereo" onclick="stereo()" type="checkbox">
   <label class="classLblData" id="lblStereo" for="checkStereo">Stereo</label>

<input class="classTxtInput" id="txtBaseline" onkeydown="userTyping(true)" onkeyup="userTyping(false); changeBaseline(); moveB()" type="text" value="1">
   <label class="classLblData" id="lblBaseline">Baseline (deg)</label>

<input name="radioStereo" id="radioCrosseye" onclick="moveB()" type="radio" checked="checked">
   <label class="classLblData" id="lblRCrosseye" for="radioCrosseye">Crosseye</label>

<input name="radioStereo" id="radioParallel" onclick="moveB()" type="radio">
   <label class="classLblData" id="lblRParallel" for="radioParallel">Parallel</label>
   <input class="classBtnClose" id="btnStereoClose" onclick="hideMe('divStereo')" type="button" value="x">
</div>

<div class="classControlDiv ui-draggable" id="divBlank" style="visibility: visible; left: 582px; top: -17px; background-color: rgba(0, 0, 255, 0); border: none;" onmouseover="hideAllMenuButtons()">
   <label class="classControlTitle" id="lblBlankTitle" style="visibility: hidden;">.</label><br>
   <div id="divInBlank" style="width: 700px; color: rgb(255, 255, 0); font-size: 20px; font-family: Consolas;">May 03 2018 03:40:00 UTC&nbsp;&nbsp;&nbsp;&nbsp; JD 2458241.652778<br>Thu May 03 2018 05:33:20 GMT+0200 (ora legale Europa occidentale)<br><table><tbody><tr><td style="text-align:left">Earth:</td><td style="text-align: right; padding-left: 20px">9.470 AU</td><td style="text-align: right; padding-left: 20px">27.726 km/s</td></tr><tr><td style="text-align:left">Sun: </td><td style="text-align: right; padding-left: 20px" ;="">10.065 AU</td><td style="text-align: right; padding-left: 40px">8.084 km/s</td></tr></tbody></table></div>
   <input class="classBtnClose" id="btnBlankClose" style="visibility: hidden;" onclick="hideMe('divBlank')" type="button" value="x">
</div>

<div class="classControlDiv ui-draggable" id="divEditObjectsVectors" style="visibility: hidden; left: 374px; top: 197px;" onmouseover="hideAllMenuButtons()">
   <label class="classControlTitle" id="lblEditObjectsVectorsTitle">Edit objects -- state vectors</label>
   <input class="classBtnClose" id="btnEditObjectsVectorsClose" onclick="hideMe('divEditObjectsVectors')" type="button" value="x">
   
   <label class="classLblData" id="lblSelectTargetObjectEOV">Object</label>
   <select class="classSelect" id="selectTargetObjectEOV" onchange="populateEditObjectsVectors(true)"><option value="1">Sun</option><option value="2">Mercury (199)</option><option value="3">Venus (299)</option><option value="4">Earth (399)</option><option value="5">Mars Barycenter (4)</option><option value="6">Jupiter Barycenter (5)</option><option value="7">Saturn Barycenter (6)</option><option value="8">Uranus Barycenter (7)</option><option value="9">Neptune Barycenter (8)</option><option value="10">Pluto Barycenter (9)</option><option value="11">Moon (301)</option><option value="12">Mimas (601)

</option><option value="13">Enceladus (602)

</option><option value="14">Tethys (603)

</option><option value="15">Dione (604)

</option><option value="16">Rhea (605)

</option><option value="17">Titan (606)

</option><option value="18">Hyperion (607)

</option><option value="19">Iapetus (608)

</option><option value="20">Camera A</option><option value="21">Camera B</option></select>

<label class="classLblData" id="lblSelectReferenceObjectEOV">Reference object</label>
   <select class="classSelect" id="selectReferenceObjectEOV" onchange="populateEditObjectsVectors(false)"><option value="1">Sun</option><option value="2">Mercury (199)</option><option value="3">Venus (299)</option><option value="4">Earth (399)</option><option value="5">Mars Barycenter (4)</option><option value="6">Jupiter Barycenter (5)</option><option value="7">Saturn Barycenter (6)</option><option value="8">Uranus Barycenter (7)</option><option value="9">Neptune Barycenter (8)</option><option value="10">Pluto Barycenter (9)</option><option value="11">Moon (301)</option><option value="12">Mimas (601)

</option><option value="13">Enceladus (602)

</option><option value="14">Tethys (603)

</option><option value="15">Dione (604)

</option><option value="16">Rhea (605)

</option><option value="17">Titan (606)

</option><option value="18">Hyperion (607)

</option><option value="19">Iapetus (608)

</option></select>

<label class="classLblData" id="lblEditObjectsVectorsColor">Color</label>
   <input class="color classTxtColor" id="txtEditObjectsVectorsColor" style="background-image: none; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsVectorsShadow">Shadow</label>
   <input class="color classTxtColor" id="txtEditObjectsVectorsShadow" style="background-image: none; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsVectorsLabel">Label</label>
   <input class="color classTxtColor" id="txtEditObjectsVectorsLabel" style="background-image: none; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsVectorsTrail">Trail</label>
   <input class="color classTxtColor" id="txtEditObjectsVectorsTrail" style="background-image: none; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsVectorDiameter">Diameter</label>
   <input class="classBtnUnit" id="btnEditObjectsVectorDiameterUnits" onclick="changeLengthUnitSmall('btnEditObjectsVectorDiameterUnits'); populateEditObjectsVectors(false)" type="button" value="(km)">
   <input class="classTxtInput" id="txtEditObjectsVectorsDiameter">

<label class="classLblData" id="lblEditObjectsVectorLocation">Location (<i>x,y,z</i>)</label>
   <input class="classBtnUnit" id="btnEditObjectsVectorPositionUnits" onclick="changeLengthUnitLarge('btnEditObjectsVectorPositionUnits'); populateEditObjectsVectors(false)" type="button" value="(AU)">
   <input class="classTxtInput" id="txtEditObjectsVectorsX">
   <input class="classTxtInput" id="txtEditObjectsVectorsY">
   <input class="classTxtInput" id="txtEditObjectsVectorsZ">

<label class="classLblData" id="lblEditObjectsVectorVelocity">Velocity (<i>x,y,z</i>)</label>
   <input class="classBtnUnit" id="btnEditObjectsVectorVelocityUnits" onclick="changeVelocityUnit('btnEditObjectsVectorVelocityUnits'); populateEditObjectsVectors(false)" type="button" value="(km/s)">
   <input class="classTxtInput" id="txtEditObjectsVectorsVx">
   <input class="classTxtInput" id="txtEditObjectsVectorsVy">
   <input class="classTxtInput" id="txtEditObjectsVectorsVz">

<div class="classControlDiv ui-draggable" id="divEditObjectsElements" style="visibility: hidden; left: 615px; top: 129px;" onmouseover="hideAllMenuButtons()">
   <label class="classControlTitle" id="lblEditObjectsElementsTitle">Edit objects -- orbital elements</label>
   <input class="classBtnClose" id="btnEditObjectsElementsClose" onclick="hideMe('divEditObjectsElements')" type="button" value="x">
   
   <label class="classLblData" id="lblSelectTargetObjectEOE">Object</label>
   <select class="classSelect" id="selectTargetObjectEOE" onchange="populateEditObjectsElements(true)"><option value="1">Sun</option><option value="2">Mercury (199)</option><option value="3">Venus (299)</option><option value="4">Earth (399)</option><option value="5">Mars Barycenter (4)</option><option value="6">Jupiter Barycenter (5)</option><option value="7">Saturn Barycenter (6)</option><option value="8">Uranus Barycenter (7)</option><option value="9">Neptune Barycenter (8)</option><option value="10">Pluto Barycenter (9)</option><option value="11">Moon (301)</option><option value="12">Mimas (601)

</option><option value="13">Enceladus (602)

</option><option value="14">Tethys (603)

</option><option value="15">Dione (604)

</option><option value="16">Rhea (605)

</option><option value="17">Titan (606)

</option><option value="18">Hyperion (607)

</option><option value="19">Iapetus (608)

</option><option value="20">Camera A</option><option value="21">Camera B</option></select>

<label class="classLblData" id="lblSelectReferenceObjectEOE">Reference object</label>
   <select class="classSelect" id="selectReferenceObjectEOE" onchange="populateEditObjectsElements(false)"><option value="1">Sun</option><option value="2">Mercury (199)</option><option value="3">Venus (299)</option><option value="4">Earth (399)</option><option value="5">Mars Barycenter (4)</option><option value="6">Jupiter Barycenter (5)</option><option value="7">Saturn Barycenter (6)</option><option value="8">Uranus Barycenter (7)</option><option value="9">Neptune Barycenter (8)</option><option value="10">Pluto Barycenter (9)</option><option value="11">Moon (301)</option><option value="12">Mimas (601)

</option><option value="13">Enceladus (602)

</option><option value="14">Tethys (603)

</option><option value="15">Dione (604)

</option><option value="16">Rhea (605)

</option><option value="17">Titan (606)

</option><option value="18">Hyperion (607)

</option><option value="19">Iapetus (608)

</option></select>

<label class="classLblData" id="lblEditObjectsElementsColor">Color</label>
   <input class="color classTxtColor" id="txtEditObjectsElementsColor" style="background-image: none; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsElementsShadow">Shadow</label>
   <input class="color classTxtColor" id="txtEditObjectsElementsShadow" style="background-image: none; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsElementsLabel">Label</label>
   <input class="color classTxtColor" id="txtEditObjectsElementsLabel" style="background-image: none; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsElementsTrail">Trail</label>
   <input class="color classTxtColor" id="txtEditObjectsElementsTrail" style="background-image: none; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" type="text" readonly="readonly" autocomplete="off">

<label class="classLblData" id="lblEditObjectsElementsDiameter">Diameter</label>
   <input class="classBtnUnit" id="btnEditObjectsElementsDiameterUnits" onclick="changeLengthUnitSmall('btnEditObjectsElementsDiameterUnits'); populateEditObjectsElements(false)" type="button" value="(km)">
   <input class="classTxtInput" id="txtEditObjectsElementsDiameter">

<span class="classNewDiv" id="spanTo" style="display: block; text-align: center">
			<label>Look at</label><br>
			<select class="classSelect" id="select1" onchange="selectTargetObjectA.selectedIndex = select1.selectedIndex; changeTargetObjectA(); changeBarycenterA();"><option value="1">Sun</option><option value="2">Mercury (199)</option><option value="3">Venus (299)</option><option value="4">Earth (399)</option><option value="5">Mars Barycenter (4)</option><option value="6">Jupiter Barycenter (5)</option><option value="7">Saturn Barycenter (6)</option><option value="8">Uranus Barycenter (7)</option><option value="9">Neptune Barycenter (8)</option><option value="10">Pluto Barycenter (9)</option><option value="11">Moon (301)</option><option value="12">Mimas (601)

</option><option value="13">Enceladus (602)

</option><option value="14">Tethys (603)

</option><option value="15">Dione (604)

</option><option value="16">Rhea (605)

</option><option value="17">Titan (606)

</option><option value="18">Hyperion (607)

</option><option value="19">Iapetus (608)

</option><option value="20">Camera A</option><option value="21">Camera B</option></select><br>
		</span>

<span class="classNewDiv" id="spanFrom" style=" display: block; text-align: center">
			<label>Look from</label><br>
			<select class="classSelect" id="select2" onchange="selectCameraObjectA.selectedIndex = select2.selectedIndex;&#10;if (select2.selectedIndex == 3 ) {btnOptionCities.style.visibility = 'visible'; setTimeout(function(){btnOptionCities.style.visibility = 'hidden'}, 3000)}&#10;&#9;&#9;&#9;if (select2.selectedIndex == objects) {divAzimuthBar.style.visibility = 'visible'; divAltitudeBar.style.visibility = 'visible'; divDistanceBar.style.visibility = 'visible'} else {divAzimuthBar.style.visibility = 'hidden'; divAltitudeBar.style.visibility = 'hidden'; divDistanceBar.style.visibility = 'hidden'} changeCameraObjectA(); changeBarycenterA();"><option value="1">Sun</option><option value="2">Mercury (199)</option><option value="3">Venus (299)</option><option value="4">Earth (399)</option><option value="5">Mars Barycenter (4)</option><option value="6">Jupiter Barycenter (5)</option><option value="7">Saturn Barycenter (6)</option><option value="8">Uranus Barycenter (7)</option><option value="9">Neptune Barycenter (8)</option><option value="10">Pluto Barycenter (9)</option><option value="11">Moon (301)</option><option value="12">Mimas (601)

</option><option value="13">Enceladus (602)

</option><option value="14">Tethys (603)

</option><option value="15">Dione (604)

</option><option value="16">Rhea (605)

</option><option value="17">Titan (606)

</option><option value="18">Hyperion (607)

</option><option value="19">Iapetus (608)

</option><option value="20">Camera A</option><option value="21">Camera B</option></select><br>
			<input class="classBtnOptions" id="btnOptionCities" style="visibility: hidden;" onclick="divCitiesA.style.visibility = 'visible'" type="button">
		</span>
		<input class="classBtnPlayMedium" id="btnPlayMedium" style='background-image: url("http://orbitsimulator.com/gravitySimulatorCloud/pauseButton.png");' onclick="pause()" type="button">
		<input class="classBtnPlayMedium" id="btnDirectionMedium" style='background-image: url("http://orbitsimulator.com/gravitySimulatorCloud/forwardButton.png");' onclick="changeTimeFlow()" type="button">
		<span class='classNewDiv"' id="spanView" style="display: block; text-align: left; font-size: 20px">
			<input title="Heliocentric view" class="classBtnMacro" id="btnOptionHeliocentric" style="left: 0px; visibility: visible;" onclick="helioCentricView()" type="button">
			<input title="Geocentric view" class="classBtnMacro" id="btnOptionGeocentric" style="left: 80px; visibility: visible;" onclick="geoCentricView()" type="button">
			<input title="Sky view (asteroid size is exaggerated)" class="classBtnMacro" id="btnOptionSkyView" style="left: 160px; visibility: visible;" onclick="skyView()" type="button">
		</span>
	</div>

<div class="ui-draggable" id="divVertical">
		<div id="divAltitudeBar" style="visibility: visible;" onclick="clearInterval(sliderInterval[3]); var y = event.clientY; advanceSliderVertical(y,'divAltitudeBar','divAltitude',3)">
			<div title="Altitude" class="ui-draggable" id="divAltitude" style="top: 0px;"></div>
		</div>
		
		<div id="divDistanceBar" style="visibility: visible;" onclick="clearInterval(sliderInterval[4]); var y = event.clientY; advanceSliderVertical(y,'divDistanceBar','divDistance',4)">
			<div title="Distance" class="ui-draggable" id="divDistance" style="top: 240px;"></div>
		</div>
		<span class="classNewDiv" id="spanNames" style=" display: block; text-align: left; font-size: 20px">
			<label class="classLblCheck" id="lblNames" onclick="if (namesOn){divCheckNames.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; namesOn = false; checkLabelsCA.checked = false; checkLabelsA.checked = false} else {divCheckNames.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';namesOn = true; checkLabelsCA.checked = true; checkLabelsA.checked = true; btnOptionNames.style.visibility = 'hidden'; setTimeout(function(){btnOptionNames.style.visibility = 'hidden'}, 3000);}">Names</label>
			<div class="divCheck" id="divCheckNames" style='background-image: url("http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF");' onclick="if (namesOn){divCheckNames.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; namesOn = false; checkLabelsCA.checked = false; checkLabelsA.checked = false} else {divCheckNames.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';namesOn = true; checkLabelsCA.checked = true; checkLabelsA.checked = true; btnOptionNames.style.visibility = 'hidden'; setTimeout(function(){btnOptionNames.style.visibility = 'hidden'}, 3000);}"></div>
			<input class="classBtnOptions" id="btnOptionNames" style="visibility: hidden;" type="button">
		</span>
		
		<span class="classNewDiv" id="spanStars" style=" display: block; text-align: left; font-size: 20px">
			<label class="classLblCheck" id="lblStars" onclick="if (starsOn){divCheckStars.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; starsOn = false; checkStarsA.checked = false} else {if (selectStars.selectedIndex == 0) {selectStars.selectedIndex = 1; loadStars();} divCheckStars.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';starsOn = true;  checkStarsA.checked = true; btnOptionStars.style.visibility = 'visible'; setTimeout(function(){btnOptionStars.style.visibility = 'hidden'}, 3000);}">Stars</label>
			<div class="divCheck" id="divCheckStars" style='background-image: url("http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF");' onclick="if (starsOn){divCheckStars.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; starsOn = false; checkStarsA.checked = false} else {if (selectStars.selectedIndex == 0) {selectStars.selectedIndex = 1; loadStars();} divCheckStars.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';starsOn = true;  checkStarsA.checked = true; btnOptionStars.style.visibility = 'visible'; setTimeout(function(){btnOptionStars.style.visibility = 'hidden'}, 3000);}"></div>

<input class="classBtnOptions" id="btnOptionStars" style="visibility: hidden;" onclick="divStars.style.visibility = 'visible'" type="button">
		</span>
		
		<span class="classNewDiv" id="spanRF" style="display: block; text-align: left; font-size: 20px">
			<label class="classLblCheck" id="lblRF" onclick="if (rotatingFrameOn){divCheckRF.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; rotatingFrameOn = false; selectTargetObjectRF.selectedIndex = 0; if (trailsOn){checkTrailsCA.click()}} else {if (!trailsOn){checkTrailsCA.click()} if (focusRF == 0) {focusRF = 4}; {selectTargetObjectRF.selectedIndex = 4}; selectTargetObjectRF.selectedIndex = focusRF; divCheckRF.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';rotatingFrameOn = true; btnOptionRF.style.visibility = 'visible'; setTimeout(function(){btnOptionRF.style.visibility = 'hidden'}, 3000);}">Rotating</label>
			<label class="classLblCheck" id="lblRF2" onclick="if (rotatingFrameOn){divCheckRF.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; rotatingFrameOn = false; selectTargetObjectRF.selectedIndex = 0; if (trailsOn){checkTrailsCA.click()}} else {if (!trailsOn){checkTrailsCA.click()} if (focusRF == 0) {focusRF = 4}; selectTargetObjectRF.selectedIndex = focusRF; divCheckRF.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';rotatingFrameOn = true; btnOptionRF.style.visibility = 'visible'; setTimeout(function(){btnOptionRF.style.visibility = 'hidden'}, 3000);}">frame</label>
			<div class="divCheck" id="divCheckRF" style='background-image: url("http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF");' onclick="if (rotatingFrameOn){divCheckRF.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; rotatingFrameOn = false; selectTargetObjectRF.selectedIndex = 0; if (trailsOn){checkTrailsCA.click()}} else {if (!trailsOn){checkTrailsCA.click()} if (focusRF == 0) {focusRF = 4}; selectTargetObjectRF.selectedIndex = focusRF; divCheckRF.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';rotatingFrameOn = true; btnOptionRF.style.visibility = 'visible'; setTimeout(function(){btnOptionRF.style.visibility = 'hidden'}, 3000);}"></div>
			<input class="classBtnOptions" id="btnOptionRF" style="visibility: hidden;" onclick="divRotatingFrame.style.visibility = 'visible';" type="button">
		</span>
		
		<span class="classNewDiv" id="spanAxes" style=" display: block; text-align: left; font-size: 20px">
			<label class="classLblCheck" id="lblnAxes" onclick="if (axesOn){divCheckAxes.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; axesOn = false; rotateCameraA();} else {divCheckAxes.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';axesOn = true; btnOptionAxes.style.visibility = 'hidden'; rotateCameraA(); setTimeout(function(){btnOptionAxes.style.visibility = 'hidden'}, 3000);}">Axes</label>
			<div class="divCheck" id="divCheckAxes" style='background-image: url("http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF");' onclick="if (axesOn){divCheckAxes.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; axesOn = false; checkAxes.checked = false; perspectiveTrails2ClsA(); perspectiveTrails2ClsB(); rotateCameraA();} else {divCheckAxes.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';axesOn = true; checkAxes.checked = true; btnOptionAxes.style.visibility = 'hidden'; rotateCameraA(); setTimeout(function(){btnOptionAxes.style.visibility = 'hidden'}, 3000);}"></div>
			<input class="classBtnOptions" id="btnOptionAxes" style="visibility: hidden;" type="button">
		</span>
		
		<span class="classNewDiv" id="span3d" style=" display: block; text-align: left; font-size: 20px">
			<label class="classLblCheck" id="lbl3d" onclick="if (stereoOn){divCheck3d.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; stereoOn = false; checkStereoCA.checked = false} else {divCheck3d.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';stereoOn = true; checkStereoCA.checked = true; btnOption3d.style.visibility = 'visible'; setTimeout(function(){btnOption3d.style.visibility = 'hidden'}, 3000);} stereo();">3d</label>
			<div class="divCheck" id="divCheck3d" style='background-image: url("http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF");' onclick="if (stereoOn){divCheck3d.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; stereoOn = false; checkStereoCA.checked = false} else {divCheck3d.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';stereoOn = true; checkStereoCA.checked = true; btnOption3d.style.visibility = 'visible'; setTimeout(function(){btnOption3d.style.visibility = 'hidden'}, 3000);} stereo();"></div>
			<input class="classBtnOptions" id="btnOption3d" style="visibility: hidden;" onclick="divStereo.style.visibility='visible'" type="button">
		</span>

<span class="classNewDiv" id="spanOrbits" style=" display: block; text-align: left; font-size: 20px">
			<label class="classLblCheck" id="lblOrbits" onclick="if (orbitsOn){divCheckOrbits.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; orbitsOn = false; checkKeplerCA.checked = false; checkPreTrailsA.checked = false; perspectiveTrails2ClsA(); perspectiveTrails2ClsB();} else {divCheckOrbits.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';orbitsOn = true; checkKeplerCA.checked = true; checkPreTrailsA.checked = true; btnOptionOrbits.style.visibility = 'visible'; setTimeout(function(){btnOptionOrbits.style.visibility = 'hidden'}, 3000);}">Orbits</label>
			<div class="divCheck" id="divCheckOrbits" style='background-image: url("http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF");' onclick="if (orbitsOn){divCheckOrbits.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; orbitsOn = false; checkKeplerCA.checked = false; checkPreTrailsA.checked = false; perspectiveTrails2ClsA(); perspectiveTrails2ClsB();} else {divCheckOrbits.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';orbitsOn = true; checkKeplerCA.checked = true; checkPreTrailsA.checked = true; btnOptionOrbits.style.visibility = 'visible'; setTimeout(function(){btnOptionOrbits.style.visibility = 'hidden'}, 3000);}"></div>
			<input class="classBtnOptions" id="btnOptionOrbits" style="visibility: hidden;" onclick="divPreTrailObjectList.style.visibility = 'visible'" type="button">
		</span>
		
		<span class="classNewDiv" id="spanTrails" style=" display: block; text-align: left; font-size: 20px">
			<label class="classLblCheck" id="lblTrails" onclick="if (trailsOn){divCheckTrails.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; trailsOn = false; checkTrailsCA.checked = false; perspectiveTrailsClsA(); perspectiveTrailsClsB(); rotateCameraA();} else {divCheckTrails.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';trailsOn = true; checkTrailsCA.checked = true; btnOptionTrails.style.visibility = 'hidden'; setTimeout(function(){btnOptionTrails.style.visibility = 'hidden'}, 3000);}">Trails</label>
			<div class="divCheck" id="divCheckTrails" style='background-image: url("http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF");' onclick="perspectiveTrails2ClsA(); perspectiveTrails2ClsB(); rotateCameraA(); if (trailsOn){divCheckTrails.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; trailsOn = false; checkTrailsCA.checked = false;} else {divCheckTrails.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)';trailsOn = true; checkTrailsCA.checked = true; btnOptionTrails.style.visibility = 'hidden'; setTimeout(function(){btnOptionTrails.style.visibility = 'hidden'}, 3000);}"></div>
			<input class="classBtnOptions" id="btnOptionTrails" style="visibility: hidden;" type="button">
		</span>
	</div>
</div>

<div class="classControlDiv ui-draggable" id="divRotateCameraA" style="left: 405px; top: 130px; visibility: hidden;">
      <label class="classControlTitle" id="lblRotateCameraATitle">Camera A</label>
      <input class="classBtnClose" id="btnRotateCameraAClose" onclick="hideMe('divRotateCameraA')" type="button" value="x">

<input class="slider" id="rangeRotateCameraA" onchange="rotateCameraA()" type="range" min="0" max="6.2830" step="0.001" value="0">
      <input class="classTxtInput" id="txtRotateCameraA" type="text" value="-999">
      <label title="Degrees" class="classLblData" id="lblRotateCameraA">Azimuth</label>

<input class="slider" id="rangeRotateCameraZ" onchange="rotateCameraA()" type="range" min="0.0175" max="3.124" step="0.001" value="0">
      <input class="classTxtInput" id="txtRotateCameraZ" type="text" value="-888">
      <label title="Degrees" class="classLblData" id="lblRotateCameraZ">Altitude</label>

<input class="slider" id="rangeRotateCameraD" onchange="rotateCameraA()" type="range" min="6" max="100" step="0.1" value="0">
      <input class="classTxtInput" id="txtRotateCameraD" type="text" value="-999">
      <label title="AU" class="classLblData" id="lblRotateCameraD">Distance</label>

<input name="checkKeplerCA" id="checkKeplerCA" onclick="perspectiveTrails2ClsA(); perspectiveTrails2ClsB(); checkPreTrailsA.checked = checkKeplerCA.checked; checkPreTrailsB.checked = checkKeplerCA.checked; if (checkKeplerCA.checked) {divCheckOrbits.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)'; orbitsOn = true} else {divCheckOrbits.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; orbitsOn = false}" type="checkbox">
      <label title="Superimpose Keplerian orbit" class="classLblData" id="lblKeplerCA" for="checkKeplerCA">Orbits</label>

<input name="checkTrailsCA" id="checkTrailsCA" onclick="perspectiveTrailsClsA(); perspectiveTrailsClsB(); rotateCameraA(); if (checkTrailsCA.checked) {divCheckTrails.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)'; trailsOn = true} else {divCheckTrails.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; trailsOn = false}" type="checkbox">
      <label title="Create trails" class="classLblData" id="lblTrailsCA" for="checkTrailsCA">Trails</label>

<input name="checkLabelsCA" id="checkLabelsCA" onclick="checkLabelsA.checked = checkLabelsCA.checked; checkLabelsB.checked = checkLabelsCA.checked; if (checkLabelsCA.checked) {divCheckNames.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/checkImg.GIF)'; namesOn = true;} else {divCheckNames.style.backgroundImage = 'url(http://orbitsimulator.com/gravitySimulatorCloud/uncheckImg.GIF)'; namesOn = false;}" type="checkbox">
      <label title="Labels" class="classLblData" id="lblLabelsCA" for="checkLabelsCA">Names</label>

</div>

<div class="classControlDiv" id="divDistanceAndSpeedA" onmouseover="hideAllMenuButtons()" ui-draggable"="">
      <label class="classControlTitle" id="lblDistanceAndSpeedATitle">Distance and speed</label>
      <label class="classControlTitle" id="lblCalendarLocalTitle">Local time</label>
      <select class="classSelect" id="selectTargetObjectDSa"></select>
      <select class="classSelect" id="selectTargetObjectDSa"></select>
      <label class="classLblData" id="lblDSaDistanceA">
      <label class="classLblData" id="lblDSaSpeedA">
      <label class="classLblData" id="lblDStangentialA">
      <label class="classLblData" id="lblDSradialA">

</label></label></label></label></div>

<div class="classControlDiv ui-draggable" id="divCalendarDate" style="visibility: hidden; left: 946px; top: 4px;" onmouseover="hideAllMenuButtons()">
      <label class="classControlTitle" id="lblCalendarLocalTitle">Local time</label>
      <span class="classLblData" id="spanCalendarDate">Thu May 03 2018 05:40:00 GMT+0200 (ora legale Europa occidentale)</span>
      <input class="classBtnClose" id="btnCalendarDateClose" onclick="hideMe('divCalendarDate')" type="button" value="x">
   </div>

<div class="classControlDiv ui-draggable" id="divCalendarDateUTC" style="visibility: hidden; left: 695px; top: 4px;" onmouseover="hideAllMenuButtons()">
      <label class="classControlTitle" id="lblCalendarUTC">Coordinated Universal Time</label>
      <span class="classLblData" id="spanCalendarDateUTC">Thu May 03 2018 03:40:00 (UTC)</span>
      <input class="classBtnClose" id="btnCalendarDateUTCClose" onclick="hideMe('divCalendarDateUTC')" type="button" value="x">
   </div>

<div class="classControlDiv ui-draggable" id="divJulianDate" style="visibility: hidden; left: 946px; top: 75px;" onmouseover="hideAllMenuButtons()">
      <label class="classControlTitle" id="lblJulianDateTitle">Julian Day</label>
      <span class="classLblData" id="spanJulianDate">2458241.652777778</span>
      <input class="classBtnClose" id="btnJulianDateClose" onclick="hideMe('divJulianDate')" type="button" value="x">
   </div>

<label class="classLblData" id="lblSaveAsFileName">Simulation name:</label>
      <input class="classTxtInput" id="txtSaveAsFileName" onkeydown="userTyping(true)" onkeyup="userTyping(false)" type="text">

<label class="classLblData" id="lblSaveAsKeywords">Keywords (optional)</label>
      <input class="classTxtInput" id="txtSaveAsKeywords" onkeydown="userTyping(true)" onkeyup="userTyping(false)" type="text">

<label class="classLblData" id="lblSaveAsDescription">Description (optional)</label>
      <textarea id="txtAreaSaveAsDescription" onkeydown="userTyping(true)" onkeyup="userTyping(false)">Simulation of the orbits of Saturn's main moons: Mimas, Enceladus, Tethys, Dione, Rhea, Titan, Hyperion and Iapetus.</textarea>
      
      <label class="classLblData" id="lblSaveAsAuthor">Author (optional)</label>
      <input class="classTxtInput" id="txtSaveAsAuthor" onkeydown="userTyping(true)" onkeyup="userTyping(false)" type="text">

<input id="checkSaveAsShare" onchange="if (checkSaveAsShare.checked) {checkSaveAsTempLink.checked = true}" type="checkbox">
      <label class="classLblData" id="lblSaveAsShare" for="checkSaveAsShare">Share on orbitsimulator.com</label>

<input id="checkSaveAsTempLink" onchange="if (checkSaveAsShare.checked) {checkSaveAsTempLink.checked = true}" type="checkbox" checked="">
      <label class="classLblData" id="lblSaveAsTempLink" for="checkSaveAsShare">Create temporary link</label>

<label class="classLblData" id="lblSaveAsAddress">Your simulation is here:</label>
      <span id="spanSimURL"></span>

<label class="classLblData" id="lblSaveAsSourceCode">Source code:</label>
      <textarea id="txtAreaSaveAs" onkeydown="userTyping(true)" onkeyup="userTyping(false)">&lt;!DOCTYPE html&gt;
&lt;html id ='htmlAll'&gt;
&lt;head&gt;
   &lt;title&gt;Main moons of Saturn&lt;/title&gt;
   &lt;meta name = 'keywords'    content = ""&gt;
   &lt;meta name = 'description' content = "Simulation of the orbits of Saturn's main moons: Mimas, Enceladus, Tethys, Dione, Rhea, Titan, Hyperion and Iapetus."&gt;
   &lt;meta name = 'author' content = 'Tony Dunn, Giuseppe gatani'&gt;
   &lt;meta http-equiv="content-type" content="text/html; charset = UTF-8"&gt;

&lt;link href="http://orbitsimulator.com/gravitySimulatorCloud/jquery-ui.css" rel="stylesheet"&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/asterismNames6_8_17.js"&gt;&lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/jquery-1.9.1.js"&gt;                 &lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/jquery-ui.js"&gt;                    &lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/jquery.ui.touch-punch.min2.js"&gt;   &lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/kbo.js"&gt;                          &lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/synthetic.js"&gt;                    &lt;/script&gt;
&lt;script id="scriptStars" src="http://orbitsimulator.com/gravitySimulatorCloud/noStars.js"&gt;     &lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/citiesLatLon.js"&gt;                 &lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/jscolor.js"&gt;                      &lt;/script&gt;
&lt;script src="http://orbitsimulator.com/gravitySimulatorCloud/constellations6_8_17.js"&gt;&lt;/script&gt;

&lt;script&gt;
   btndescout = new Image;btndescover= new Image;btndescout.src = "http://orbitsimulator.com/gravity/articles/descorange.GIF";btndescover.src = "http://orbitsimulator.com/gravity/articles/descyellow.GIF";
   btndownout = new Image;btndownover= new Image;btndownout.src = "http://orbitsimulator.com/gravity/articles/downorange.GIF";btndownover.src = "http://orbitsimulator.com/gravity/articles/downyellow.GIF";
   btnsimuout = new Image;btnsimuover= new Image;btnsimuout.src = "http://orbitsimulator.com/gravity/articles/simuorange.GIF";btnsimuover.src = "http://orbitsimulator.com/gravity/articles/simuyellow.GIF";
   btnmessout = new Image;btnmessover= new Image;btnmessout.src = "http://orbitsimulator.com/gravity/articles/messorange.GIF";btnmessover.src = "http://orbitsimulator.com/gravity/articles/messyellow.GIF";
   btnscieout = new Image;btnscieover= new Image;btnscieout.src = "http://orbitsimulator.com/gravity/articles/scieorange.GIF";btnscieover.src = "http://orbitsimulator.com/gravity/articles/scieyellow.GIF";
   btncontout = new Image;btncontover= new Image;btncontout.src = "http://orbitsimulator.com/gravity/articles/contorange.GIF";btncontover.src = "http://orbitsimulator.com/gravity/articles/contyellow.GIF";
   btnlinkout = new Image;btnlinkover= new Image;btnlinkout.src = "http://orbitsimulator.com/gravity/articles/linkorange.GIF";btnlinkover.src = "http://orbitsimulator.com/gravity/articles/linkyellow.GIF";
&lt;/script&gt;
&lt;style&gt;
nav ul ul {
	display: none;
}

nav ul li:hover &gt; ul {
		display: block;
	}

nav ul {z-index: 10; 
    font-family: Tahoma, Geneva, sans-serif; font-size: 20px;
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 0px;
	border-radius: 0px;  
	list-style: none;
	position: fixed; top: -20px; left: 0px;
	//display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #fff;
		}

nav ul li:hover label {
			color: #fff;
		}

nav ul ul li:active label {
			color: #aaa;
		}

nav ul li a {
		display: block; padding: 0px 10px;
		color: #757575; text-decoration: none;
	}

nav ul li label {
		display: block; padding: 0px 0px;
		color: #757575; text-decoration: none;
	}

nav ul li label {
		display: block; padding: 0px 10px;
		color: #757575; text-decoration: none;
	}

nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}
		nav ul ul li label {
			padding: 0px 10px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #4b545f;
			}
			nav ul ul li label:hover {
				background: #4b545f;
			}

nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

.slider {
  width: 200px; opacity: 0.8;
  //margin: 100px auto;
}

input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
//  width: 100%;
  width: 200px;
  height: 20px;
  margin: 0;
  border: none;
  padding: 1px 2px;
  border-radius: 14px;
  background: #232528;
  box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  -webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  outline: none; /* no focus outline */
}

input[type="range"]::-moz-range-track {
  border: inherit;
  background: transparent;
}

input[type="range"]::-ms-track {
  border: inherit;
  color: transparent; /* don't drawn vertical reference line */
  background: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

/* thumb */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android &lt;= 2.2 */
  background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android &gt; 2.2 */;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
input[type="range"]::-moz-range-thumb {
  width: 40px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}